import { memo } from "react"
import styled from "@emotion/styled"

// 定义状态类型
type StatusType =
    | "pending"
    | "paying"
    | "under_review"
    | "completed"
    | "timeout"
    | "canceled"
    | "default"

// 状态对应的颜色映射
const STATUS_COLORS: Record<StatusType, string> = {
    pending: "#ff8800", // 橙色
    paying: "#ff8800", // 橙色
    under_review: "#ff8800", // 橙色
    completed: "#00b42a", // 绿色
    timeout: "#f51450", // 红色
    canceled: "#f51450", // 红色
    default: "#131416", // 默认颜色
}

// 状态文本的样式组件
const ItemStatusStyled = styled.span<{ statusType: StatusType }>`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 12rem;
    line-height: 16rem;
    text-align: right;
    vertical-align: middle;
    color: ${(props) => STATUS_COLORS[props.statusType] || STATUS_COLORS.default};
`

interface ItemStatusProps {
    text?: string
}

// 获取状态类型
const getStatusType = (text: string = ""): StatusType => {
    const lowerCaseText = text.toLowerCase()

    if (
        ["pending", "paying", "under_review", "completed", "timeout", "canceled"].includes(
            lowerCaseText,
        )
    ) {
        return lowerCaseText as StatusType
    }

    return "default"
}

// 状态显示组件
const ItemStatus: React.FC<ItemStatusProps> = ({ text = "" }) => {
    const lowerCaseText = text.toLowerCase()
    const statusType = getStatusType(lowerCaseText)

    // 将状态文本首字母大写
    const capitalizedText = lowerCaseText.charAt(0).toUpperCase() + lowerCaseText.slice(1)

    return <ItemStatusStyled statusType={statusType}>{capitalizedText}</ItemStatusStyled>
}

export default memo(ItemStatus)
